<template>
  <div>
    <div class="base-info" v-if="!isEdit">
      <div class="base-info-padding background-white margin-top-16">
        <p class="title">服务商基本信息
          <el-button type="text" @click="edit">编辑</el-button>
        </p>
        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">机构logo：</span>
            </el-col>
            <el-col :span="21">
              <div class="server-logo">
                <img
                  src="../../../../assets/img/server_logo.png" height="110" width="110"/>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">主图（形象大图）：</span>
            </el-col>
            <el-col :span="21">
              <div class="server-logo">
                <img
                  src="../../../../assets/img/server_logo.png" height="110" width="110"/>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">学校简介:</span>
            </el-col>
            <el-col :span="21">
              <span class="second-right">贵州省贵阳市花溪区</span>
            </el-col>
          </el-row>
        </div>
        <div class="margin-18">
          <el-row :gutter="20">
            <el-col :span="3">
              <span class="first-left">简介照片：</span>
            </el-col>
            <el-col :span="21">
              <span class="second-right">xxxxx</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div v-if="isEdit">
      <div class="background-white">
        <div  style="padding: 16px 0 30px 15px;border-bottom: 1px solid #f2f2f2">
          <div class="margin-18">
            <el-row>
              <el-col :span="3">
                <span class="first-left">机构logo：</span>
              </el-col>
              <el-col :span="8">
                <upload :limit="1" :errorTitle="'只能上传1张机构logo'" @uploadSuccess="getInstituteLogo"></upload>
              </el-col>
            </el-row>
          </div>

          <div class="margin-18">
            <el-row>
              <el-col :span="3">
                <span class="first-left">主图(形象大图)：</span>
              </el-col>
              <el-col :span="8">
                <upload :limit="1" :errorTitle="'只能上传1张主图(形象大图)'"></upload>
              </el-col>
            </el-row>
          </div>

          <div class="margin-18">
            <el-row>
              <el-col :span="3">
                <span class="first-left">学校简介：</span>
              </el-col>
              <el-col :span="8">
                <el-input
                  type="textarea"
                  :autosize="{ minRows:5, maxRows: 14}"
                  placeholder="请输入简介"
                  v-model="des">
                </el-input>
              </el-col>
            </el-row>
          </div>

          <div class="margin-18">
            <el-row>
              <el-col :span="3">
                <span class="first-left">简介照片：</span>
              </el-col>
              <el-col :span="8">
                <upload :limit="1" :errorTitle="'只能上传1张简介照片'"></upload>
              </el-col>
            </el-row>
          </div>
        </div>

        <div style="padding-top:15px;padding-bottom: 25px">
          <el-row>
            <el-col :span="6" :offset="3">
              <el-button type="danger" size="mini">保存</el-button>
              <el-button size="mini">删除</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'

  import upload from "~/components/uploadImg";

  export default {
    layout: 'frame',
    name: "index",
    components: {
      upload
    },
    data() {
      return {
        breadTitle: '基本内容管理',
        des: ''
      }
    },
    beforeUpdate() {
      this.initInfo()
    },
    computed: {
      //控制是否显示导航
      ...mapState({
        isShowBread: state => state.filter.isShowBread
      }),
      //编辑
      ...mapState({
        isEdit: state => state.filter.isEdit
      }),
    },
    methods: {
      ...mapMutations('filter', [
        'SetIsShowBread', 'SetCurrentPath', 'SetIsEdit'
      ]),

      //编辑
      edit() {
        this.SetIsEdit(true);
        this.initInfo();
      },
      //初试化
      initInfo() {
        this.SetIsShowBread(true);  //设置面包屑导航是否显示

        //面包屑显示后内容
        if (this.isShowBread && !this.isEdit && !this.isAdd) {
          this.SetCurrentPath({url: '/', title: this.breadTitle});
        } else if (this.isEdit) {
          this.SetCurrentPath({url: '/', title: '编辑基本内容'});
          this.SetIsEdit(true);
        }
      },

      //获取机构logo
      getInstituteLogo(res) {
        console.log(res)
      }
    },
    beforeDestroy() {
      this.SetIsEdit(false)
    }
  }
</script>

<style scoped lang="scss">
  .margin-top-16 {
    margin-top: 16px;
  }

  .base-info {

    .base-info-padding {
      padding: 24px 0 22px 15px;

      .title {
        font-size: 16px;
        color: #333333;
      }
    }
  }

  .margin-18 {
    margin-top: 18px;

    .server-logo {
      img {
        height: 64px;
        width: 64px;
      }
    }

    .first-left {
      font-size: 14px;
      color: #666666;
    }

    .second-right {
      font-size: 14px;
      color: #333333;
    }

    .person-info {
      padding-top: 18px;
      border-top: 1px solid #f2f2f2;
    }
  }


</style>
